<template>
  <div class="listOfFaults">
    <view class="title">
      <view class="statistics">
        <view :class="echartsType == 1 ? 'title-active' : ''" @click="setEchartsType(1)">
          {{ t("siteDetail.aListOfDevices") }}
        </view>
        <view :class="echartsType == 2 ? 'title-active' : ''" @click="setEchartsType(2)">
          {{ t("siteDetail.listOfFaults") }}
        </view>
      </view>
    </view>
    <!-- 设备 -->
    <template v-if="echartsType == 1">
      <view class="list">
        <view class="list-item" v-for="(item, index) in props.equipmentDataList" v-show="index < 3"
          @click="goEquipmentDetail(item)">
          <view class="theNameOfTheDevice">
            <up-row>
              <up-col span="8">
                <view class="theNameOfTheDevice-name">
                  {{ item.deviceName }}
                </view>
              </up-col>
              <up-col span="4">
                <view class="theNameOfTheDevice-icon">
                  <!-- <text class="name">{{ item.deviceType }}</text> -->
                  <text class="icon" :class="item.workStatusType == -1
                      ? 'fault'
                      : item.workStatusType == 0
                        ? 'freeTime'
                        : item.workStatusType == 1
                          ? 'run'
                          : ''
                    ">
                    {{ item.workStatus }}
                  </text>
                </view>
              </up-col>
            </up-row>
          </view>

          <view class="list-item-content">
            <up-row>
              <up-col span="12">
                <view class="list-item-content-left">
                  <text>{{ t("siteDetail.installedCapacity") }}:</text>
                  <text class="val">{{ formatElectricity(item.capacity) }}</text>
                </view>
              </up-col>
            </up-row>
            <up-row>
              <up-col span="12">
                <view class="list-item-content-right">
                  <text>{{ t("siteDetail.installedPower") }}:</text>
                  <text class="val">
                    {{ formatPower(item.power) }}
                  </text>
                </view>
              </up-col>
            </up-row>
            <up-row>
              <up-col span="12">
                <view class="list-item-content-left">
                  <text>{{ t("siteDetail.totalChargeToo") }}:</text>
                  <text class="val">
                    {{ formatElectricity(item.deviceCumulativeCharge) }}
                  </text>
                </view>
              </up-col>
            </up-row>
            <up-row>
              <up-col span="12">
                <view class="list-item-content-right">
                  <text>{{ t("siteDetail.theTotalAmountOfDischarge") }}:</text>
                  <text class="val">
                    {{ formatElectricity(item.deviceCumulativeDischarge) }}
                  </text>
                </view>
              </up-col>
            </up-row>
          </view>
        </view>
        <up-button v-if="props.equipmentDataList.length > 3" type="primary" :text="t('siteDetail.lookMore')"
          style="width: 272rpx" @click="seeMore"></up-button>
      </view>
    </template>
    <!-- 故障 -->
    <template v-if="echartsType == 2">
      <view class="list-fault">
        <view class="list-item" v-for="(item, index) in props.faultDataList" v-show="index < 3">
          <view class="theNameOfTheDevice">
            <up-row>
              <up-col span="8">
                <view class="theNameOfTheDevice-name">
                  {{ item.moduleName }}
                </view>
              </up-col>
              <up-col span="4">
                <view class="theNameOfTheDevice-icon">
                  <!-- <text class="name">{{ item.moduleName }}</text> -->
                  <text class="icon">
                    {{
                      item.type == 0
                        ? t("siteDetail.alarm")
                        : t("siteDetail.fault")
                    }}
                  </text>
                </view>
              </up-col>
            </up-row>
          </view>

          <view class="list-item-content">
            {{ item.alarmName }}
          </view>
          <view class="list-item-time">
            {{ item.createTime }}
          </view>
        </view>
        <up-button v-if="props.faultDataList.length > 3" type="primary" :text="t('siteDetail.lookMore')"
          style="width: 272rpx" @click="seeMore"></up-button>
      </view>
    </template>
  </div>
</template>

<script setup>
import { ref, defineExpose } from "vue";
import { formatElectricity, formatPower } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const echartsType = ref(1);
const props = defineProps({
  equipmentDataList: {
    type: Array,
    default: [],
  },
  faultDataList: {
    type: Array,
    default: [],
  },
});

const getListType = () => {
  return echartsType.value;
};
defineExpose({
  getListType,
});

const emit = defineEmits([
  "equipmentFaultDataList",
  "goDeviceDetails",
  "handlegoEquipmentDetail",
]);

const goEquipmentDetail = (item) => {
  emit("handlegoEquipmentDetail", JSON.stringify(item));
};

const setEchartsType = (params) => {
  if (params !== echartsType.value) echartsType.value = params;
  emit("equipmentFaultDataList");
};

const seeMore = () => {
  emit("goDeviceDetails", echartsType.value);
};
</script>

<style scoped lang="scss">
.listOfFaults {
  width: 100%;
  border-radius: 16rpx;
  background: #132034;
  padding: 0 32rpx 39rpx 32rpx;
  box-sizing: border-box;

  .title {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .statistics {
      width: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: PingFang SC Bold;
      font-size: 32rpx;
      font-weight: normal;
      color: #dddddd;

      .title-active {
        color: #64b7f6;
        position: relative;
      }

      .title-active::after {
        content: "";
        position: absolute;
        background: #64b7f6;
        width: 50rpx;
        height: 8rpx;
        left: 50%;
        bottom: -24rpx;
        transform: translateX(-50%);
        border-radius: 10rpx;
      }
    }

    .time {
      width: 50%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      :deep(.u-subsection) {
        width: 270rpx;
      }

      :deep(.u-subsection--button__bar) {
        width: 90rpx !important;
        background: #64b7f6;
      }
    }
  }

  .list {
    width: 100%;

    .list-item {
      border-radius: 16rpx;
      width: 100%;
      margin-bottom: 24rpx;
      background: #08121e;
      padding: 33rpx 24rpx;
      box-sizing: border-box;

      .theNameOfTheDevice-name {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #eeeeee;
        width: 100%;
        white-space: nowrap;
        /* 禁止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .theNameOfTheDevice-icon {
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #58d282;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;

        // .name {
        //   font-family: Alibaba PuHuiTi 3;
        //   font-size: 32rpx;
        //   font-weight: normal;
        //   font-variation-settings: "opsz" auto;
        //   color: #eeeeee;
        //   margin-right: 20rpx;
        // }
        .icon {
          white-space: nowrap;
          padding: 13rpx 34rpx;
          border-radius: 80rpx;
          background: rgba(88, 210, 130, 0.16);
        }

        .fault {
          background: #412636;
          color: #fa3b3d;
        }

        .freeTime {
          background: #351a5d;
          color: #bf00ff;
        }

        .run {
          background: #19423c;
          color: #34c759;
        }
      }

      .list-item-content {
        margin-top: 30rpx;

        .list-item-content-left {
          font-family: Alibaba PuHuiTi 3;
          font-size: 28rpx;
          font-variation-settings: "opsz" auto;
          color: #dddddd;
          margin-bottom: 12rpx;
          display: flex;
          justify-content: space-between;

          .val {
            flex: 1;
            width: 100%;
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
          }
        }

        .list-item-content-right {
          font-family: Alibaba PuHuiTi 3;
          font-size: 28rpx;
          font-variation-settings: "opsz" auto;
          color: #dddddd;
          margin-bottom: 12rpx;

          // display: flex;
          // justify-content: flex-start;
          // text {
          //   flex: 1;
          //   width: 100%;
          //   white-space: nowrap; /* 禁止文本换行 */
          //   overflow: hidden; /* 超出部分隐藏 */
          //   text-overflow: ellipsis; /* 超出部分显示省略号 */
          // }
        }
      }
    }
  }

  .list-fault {
    .list-item {
      border-radius: 16rpx;
      width: 100%;
      margin-bottom: 24rpx;
      background: #08121e;
      padding: 33rpx 24rpx;
      box-sizing: border-box;

      .theNameOfTheDevice-name {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #eeeeee;
        width: 100%;
        white-space: nowrap;
        /* 禁止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .theNameOfTheDevice-icon {
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #58d282;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        box-sizing: border-box;

        .name {
          font-family: Alibaba PuHuiTi 3;
          font-size: 32rpx;
          font-weight: normal;
          font-variation-settings: "opsz" auto;
          color: #eeeeee;
          margin-right: 20rpx;
          width: 150rpx;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
        }

        .icon {
          padding: 13rpx 34rpx;
          border-radius: 80rpx;
          background: #412636;
          color: #fa3b3d;
        }

        // .fault {
        //   background: #412636;
        //   color: #fa3b3d;
        // }
        // .freeTime {
        //   background: #351a5d;
        //   color: #bf00ff;
        // }
        // .run {
        //   background: #19423c;
        //   color: #34c759;
        // }
      }

      .list-item-content {
        margin-top: 20rpx;
        font-family: Alibaba PuHuiTi 3;
        font-size: 28rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #dddddd;
        white-space: normal;
        /* 允许文本换行 */
        overflow-wrap: break-word;
        /* 强制在单词内换行 */
        word-break: break-all;
        /* 允许在单词内换行 */
      }

      .list-item-time {
        margin-top: 20rpx;
        font-family: Alibaba PuHuiTi 3;
        font-size: 24rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #dddddd;
      }
    }
  }
}
</style>
